<template>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      :default-sort="{ prop: 'No', order: 'descending' }"
      border
      max-height="300"
      style="width: 100%;flex:5"
      @selection-change="handleSelectionChange"
  >
    <el-table-column :selectable="selectable" type="selection" width="55"/>
    <el-table-column label="No" sortable width="90">
      <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column label="姓名" property=name sortable width="100"/>
    <el-table-column label="职位" property=position width="100"/>
    <el-table-column label="状态" property=status width="150"/>
    <el-table-column show-overflow-tooltip>
      <template #default="scope">
        <el-button :disabled="PAUserOneStore.tabledata[scope.$index].isDisabled" size="small"
                   @click="insert(scope.$index, scope.row)">释放
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {ElTable} from 'element-plus'
import {usePAUserTwoStore} from "@/stores/PAUserTwo";
import {usePAUserOneStore} from "@/stores/PAUserOne";

const PAUserTwoStore = usePAUserTwoStore()
const PAUserOneStore = usePAUserOneStore()

interface data {
  id: number
  name: string
  position: string
  status: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<data[]>([])
const handleSelectionChange = (val: data[]) => {
  multipleSelection.value = val
}


const selectable = (row, index) => {
  return !(index === 0);
}

const insertSelect = () => {
  for (let i = 0; i < multipleSelection.value.length; i++) {
    PAUserTwoStore.setTableData(multipleSelection.value[i])
    PAUserOneStore.deleteUser(multipleSelection.value[i])
  }
}

defineExpose({
  insertSelect,
})

const insert = (index: number, row: data) => {
  PAUserTwoStore.setTableData(row)
  PAUserOneStore.tabledata.splice(index, 1)
}

const tableData: data[] = PAUserOneStore.tabledata
</script>
